<template>
  <van-swipe
    classs="my-swipe"
    :autoplay="3000"
    indicator-color="#ef2000"
    lazy-render
  >
    <van-swipe-item
      v-for="(img, index) in swipeImgs.banners"
      :key="index"
      class="van-swipe-item"
    >
      <img :src="img.pic" alt="" class="banner-item" />
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { $http } from '@/utils/Axios.js'
import { reactive } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
export default {
  name: 'Swipe',
  setup() {
    const swipeImgs = reactive({
      banners: []
    })
    async function getSwipeImg() {
      // 获取轮播图数据
      const { data: res } = await $http.get('banner', { params: { type: 2 } })
      swipeImgs.banners = res.banners
    }
    onMounted(() => {
      getSwipeImg()
    })

    return {
      getSwipeImg,
      swipeImgs
    }
  }
}
</script>

<style lang="less" scoped>
.van-swipe {
  width: 100%;
  padding-top: 0.2rem;
  overflow: hidden;
  .van-swipe__track {
    overflow: hidden;
    .van-swipe-item {
      overflow: hidden;
      .banner-item {
        height: 3rem;
        border-radius: 0.2rem;
      }
    }
  }
  .van-swipe__indicators {
    bottom: 0.4rem;
    .van-swipe__indicator--active {
      background-color: #ef2000 !important;
    }
  }
}
</style>
